.wrapper {
  // width: 100vw;
  // height: 100vh;
  // transform-style: preserve-3d;
  perspective: 500px;
  cursor: pointer;
  // background: #000;
}

.element {
  --translate-rate-x: 0deg;
  --translate-rate-y: 0deg;
  --translate-x: 0px;
  --translate-y: 0px;
  --card-scale:1;

  z-index: 10;
  margin: auto;
  width: 280px;
  height: 340px;
  // background: linear-gradient(45deg, black, deeppink, #6006ff);
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: all 0.33s ease;

  position: relative;

  mix-blend-mode: color-dodge;
  background-size: cover;
  
  // overflow: hidden;
  -webkit-transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale)) rotateX(var(--translate-rate-x)) rotateY(var(--translate-rate-y));
  transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale)) rotateX(var(--translate-rate-x)) rotateY(var(--translate-rate-y));
}

.g-img {
  --per: 30%;
  position: relative;
  width: 100%;
  height: 100%;
  // background: url('/images/111.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);
  
  &::after {
      content: "";
      display: none;
      position: absolute;
      inset: 0;
      border-radius: 10px;
      background: url("/images/2222.gif");
      mix-blend-mode: color-dodge;
  }
  
  &::before {
      content: "";
      display: none;
      position: absolute;
      // border: 1px solid #999;
      inset: 0;
      border-radius: 10px;
      // background: 
      //     linear-gradient(
      //         115deg, 
      //         transparent 0%, 
      //         rgba(255, 255, 255, 0.7) var(--per), 
      //         rgba(0, 0, 0, .6) calc(var(--per) + 25%), 
      //         rgba(255, 255, 255, .5) calc(var(--per) + 50%), 
      //         transparent 100%
      //     );
      // mix-blend-mode: color-dodge;
      background: 
            linear-gradient(115deg, 
                transparent 0%, 
                #06e8ff var(--per), 
                #ffab2e calc(var(--per) + 25%), 
                #ff2212 calc(var(--per) + 50%),
                transparent 100%);
        mix-blend-mode: overlay;
  }
  
  &:hover::after,
  &:hover::before {
      display: block;
  }
}

.no-vfx {
  scale: .8;
  .g-img::after{
    display: none;
  }
  .g-img::before{
    display: none;
  }
}
.active {
  --card-edge:hsl(47, 100%, 78%);
  --card-glow:hsl(175, 100%, 90%);

  z-index: 100;
  .g-img{
    box-shadow: 0 0 3px -1px white, 0 0 3px 1px var(--card-edge), 0 0 12px 2px var(--card-glow), 0px 10px 20px -5px black, 0 0 40px -30px var(--card-glow), 0 0 50px -20px var(--card-glow);
  }
}